<template>
  <div class="power">
    <div class="num">{{number}}</div>
    <img :src="imgArr[level]" class>
    <div :class="color? 'green':'black'">4G</div>
  </div>
</template>

<style lang="less" scoped>
@import "./index.less";
</style>

<script>
export default {
  name: "Power",
  data() {
    return {
      imgArr: [
        require("../../assets/public/1.png"),
        require("../../assets/public/2.png"),
        require("../../assets/public/3.png"),
        require("../../assets/public/4.png")
      ]
    };
  },
  computed: {
    level() {
      if (0 <= this.number && this.number < 25) {
        return 0;
      }
      if (25 <= this.number && this.number < 50) {
        return 1;
      }
      if (50 <= this.number && this.number < 75) {
        return 2;
      }
      if (75 <= this.number && this.number <= 100) {
        return 3;
      }
      return 3;
    }
  },
  props: ["number", "color"]
};
</script>